import MenuToggle from '../components/MenuToggle';
import { CardContent, Card } from '@/components/ui/card';
import { SelectItem, Select, SelectContent, SelectValue, SelectTrigger } from '@/components/ui/select';
import { Trash2, Filter, Star, Search, Grid, MoreVertical, Upload, List, Share2, Home, Download, Users, Eye } from 'lucide-react';
import FileIcon from '../components/FileIcon';
import React, { useState } from 'react';
import { Button } from '@/components/ui/button';
const Starred = ({ toggleSidebar }) => {
  const [viewMode, setViewMode] = useState('grid');
  const [searchQuery, setSearchQuery] = useState('');
  const [selectedFiles, setSelectedFiles] = useState([]);
  const [filterType, setFilterType] = useState('all');

  // 模拟已加星标文件数据
  const [files] = useState([
    {
      id: 1,
      name: '重要项目文档',
      type: 'folder',
      size: null,
      modified: '2024-01-20',
      items: 8,
      starredDate: '2024-01-20',
      location: '我的文件'
    },
    {
      id: 2,
      name: '年度总结报告.docx',
      type: 'document',
      size: '4.2 MB',
      modified: '2024-01-19',
      starredDate: '2024-01-19',
      location: '工作文档'
    },
    {
      id: 3,
      name: '财务数据.xlsx',
      type: 'spreadsheet',
      size: '2.8 MB',
      modified: '2024-01-18',
      starredDate: '2024-01-18',
      location: '共享文件'
    },
    {
      id: 4,
      name: '产品发布会.pptx',
      type: 'presentation',
      size: '12.5 MB',
      modified: '2024-01-17',
      starredDate: '2024-01-17',
      location: '我的文件'
    },
    {
      id: 5,
      name: '合同文件.pdf',
      type: 'pdf',
      size: '1.8 MB',
      modified: '2024-01-16',
      starredDate: '2024-01-16',
      location: '法务文档'
    },
    {
      id: 6,
      name: '设计素材',
      type: 'folder',
      size: null,
      modified: '2024-01-15',
      items: 25,
      starredDate: '2024-01-15',
      location: '共享文件'
    }
  ]);

  const filteredFiles = files.filter(file => {
    const matchesSearch = file.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
                         file.location.toLowerCase().includes(searchQuery.toLowerCase());
    const matchesType = filterType === 'all' || 
                       (filterType === 'folders' && file.type === 'folder') ||
                       (filterType === 'files' && file.type !== 'folder');
    return matchesSearch && matchesType;
  });

  const handleFileSelect = (fileId) => {
    setSelectedFiles(prev => 
      prev.includes(fileId) 
        ? prev.filter(id => id !== fileId)
        : [...prev, fileId]
    );
  };

  const handleRemoveStar = (fileId, event) => {
    event.stopPropagation();
    // 这里应该调用API移除星标
    console.log('移除星标:', fileId);
  };

  return (
    <>
      {/* 头部工具栏 */}
      <div className="mt-3">
        <div className="container mx-auto px-4 py-4">
          <div className="flex items-center justify-between">
            {/* 左侧：菜单按钮和标题 */}
            <div className="flex items-center space-x-4">
              <MenuToggle onClick={toggleSidebar} />
              
              <div className="flex items-center space-x-3">
                <div className="w-10 h-10 bg-gradient-to-br from-yellow-500 to-yellow-600 rounded-xl flex items-center justify-center">
                  <Star className="w-6 h-6 text-white" />
                </div>
                <div>
                  <h1 className="text-2xl font-bold text-material-grey-800">
                    已加星标
                  </h1>
                  <p className="text-sm text-material-grey-600">
                    查看您标记为重要的文件
                  </p>
                </div>
              </div>
            </div>

            {/* 右侧：操作按钮 */}
            <div className="flex items-center space-x-3">
              <div className="relative">
                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-material-grey-500" />
                <input
                  type="text"
                  placeholder="搜索星标文件..."
                  value={searchQuery}
                  onChange={(e) => setSearchQuery(e.target.value)}
                  className="pl-10 pr-4 py-2 w-80 border border-material-grey-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-colors"
                />
              </div>

              <Select value={filterType} onValueChange={setFilterType}>
                <SelectTrigger className="w-32">
                  <Filter className="w-4 h-4 mr-2" />
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="all">全部</SelectItem>
                  <SelectItem value="folders">文件夹</SelectItem>
                  <SelectItem value="files">文件</SelectItem>
                </SelectContent>
              </Select>

              <div className="flex items-center bg-material-grey-100 rounded-lg p-1">
                <Button
                  variant={viewMode === 'grid' ? 'default' : 'ghost'}
                  size="sm"
                  onClick={() => setViewMode('grid')}
                  className="px-3"
                >
                  <Grid className="w-4 h-4" />
                </Button>
                <Button
                  variant={viewMode === 'list' ? 'default' : 'ghost'}
                  size="sm"
                  onClick={() => setViewMode('list')}
                  className="px-3"
                >
                  <List className="w-4 h-4" />
                </Button>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* 主内容区域 */}
      <div className="flex-1 container mx-auto px-4 py-6">
        {/* 统计卡片 */}
        <div className="grid grid-cols-1 md:grid-cols-4 gap-6 mb-6">
          <Card>
            <CardContent className="p-6">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-sm font-medium text-material-grey-600">星标文件</p>
                  <p className="text-2xl font-bold text-material-grey-900">{files.length}</p>
                </div>
                <div className="w-12 h-12 bg-yellow-100 rounded-lg flex items-center justify-center">
                  <Star className="w-6 h-6 text-yellow-600" />
                </div>
              </div>
            </CardContent>
          </Card>

          <Card>
            <CardContent className="p-6">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-sm font-medium text-material-grey-600">文件夹</p>
                  <p className="text-2xl font-bold text-blue-600">
                    {files.filter(f => f.type === 'folder').length}
                  </p>
                </div>
                <div className="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center">
                  <Home className="w-6 h-6 text-blue-600" />
                </div>
              </div>
            </CardContent>
          </Card>

          <Card>
            <CardContent className="p-6">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-sm font-medium text-material-grey-600">文档文件</p>
                  <p className="text-2xl font-bold text-green-600">
                    {files.filter(f => ['document', 'pdf', 'spreadsheet', 'presentation'].includes(f.type)).length}
                  </p>
                </div>
                <div className="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center">
                  <Home className="w-6 h-6 text-green-600" />
                </div>
              </div>
            </CardContent>
          </Card>

          <Card>
            <CardContent className="p-6">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-sm font-medium text-material-grey-600">本周新增</p>
                  <p className="text-2xl font-bold text-purple-600">3</p>
                </div>
                <div className="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center">
                  <Star className="w-6 h-6 text-purple-600" />
                </div>
              </div>
            </CardContent>
          </Card>
        </div>

        {/* 文件列表 */}
        <div className="mt-6">
          {viewMode === 'grid' ? (
            <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8 gap-4">
              {filteredFiles.map((file) => (
                <div
                  key={file.id}
                  className={`file-grid-item group relative ${
                    selectedFiles.includes(file.id) ? 'ring-2 ring-primary bg-primary/5' : ''
                  }`}
                  onClick={() => handleFileSelect(file.id)}
                >
                  {/* 选择框 */}
                  <div className="absolute top-2 left-2 opacity-0 group-hover:opacity-100 transition-opacity">
                    <input
                      type="checkbox"
                      checked={selectedFiles.includes(file.id)}
                      onChange={(e) => {
                        e.stopPropagation();
                        handleFileSelect(file.id);
                      }}
                      className="w-4 h-4 text-primary border-material-grey-300 rounded focus:ring-primary/50"
                    />
                  </div>

                  {/* 星标按钮 */}
                  <div className="absolute top-2 right-2">
                    <Button
                      variant="ghost"
                      size="sm"
                      onClick={(e) => handleRemoveStar(file.id, e)}
                      className="p-1 h-auto hover:bg-red-100"
                    >
                      <Star className="w-4 h-4 fill-yellow-400 text-yellow-400 hover:text-red-500" />
                    </Button>
                  </div>

                  {/* 文件图标和信息 */}
                  <div className="flex flex-col items-center text-center pt-6">
                    <div className="mb-3">
                      <FileIcon type={file.type} size="large" />
                    </div>

                    <div className="w-full">
                      <p className="text-sm font-medium text-material-grey-800 truncate mb-1">
                        {file.name}
                      </p>
                      
                      <div className="text-xs text-material-grey-500">
                        {file.type === 'folder' ? (
                          <span>{file.items} 个项目</span>
                        ) : (
                          <span>{file.size}</span>
                        )}
                      </div>
                      
                      <div className="text-xs text-material-grey-400 mt-1">
                        位置: {file.location}
                      </div>
                      
                      <div className="text-xs text-material-grey-400">
                        {file.starredDate}
                      </div>
                    </div>
                  </div>

                  {/* 悬停效果 */}
                  <div className="absolute inset-0 bg-primary/5 opacity-0 group-hover:opacity-100 transition-opacity rounded-lg pointer-events-none" />
                </div>
              ))}
            </div>
          ) : (
            <div className="bg-white rounded-lg shadow-material-1 overflow-hidden">
              {/* 表头 */}
              <div className="bg-material-grey-50 border-b border-material-grey-200 px-4 py-3">
                <div className="flex items-center">
                  <div className="w-8"></div>
                  <div className="flex-1 grid grid-cols-12 gap-4 text-sm font-medium text-material-grey-700">
                    <div className="col-span-4">名称</div>
                    <div className="col-span-2">大小</div>
                    <div className="col-span-2">位置</div>
                    <div className="col-span-2">加星日期</div>
                    <div className="col-span-2">操作</div>
                  </div>
                </div>
              </div>

              {/* 文件列表 */}
              <div className="divide-y divide-material-grey-200">
                {filteredFiles.map((file) => (
                  <div
                    key={file.id}
                    className={`file-list-item ${
                      selectedFiles.includes(file.id) ? 'bg-primary/5' : ''
                    }`}
                    onClick={() => handleFileSelect(file.id)}
                  >
                    <div className="w-8 flex-shrink-0">
                      <input
                        type="checkbox"
                        checked={selectedFiles.includes(file.id)}
                        onChange={(e) => {
                          e.stopPropagation();
                          handleFileSelect(file.id);
                        }}
                        className="w-4 h-4 text-primary border-material-grey-300 rounded focus:ring-primary/50"
                      />
                    </div>

                    <div className="flex-1 grid grid-cols-12 gap-4 items-center">
                      <div className="col-span-4 flex items-center space-x-3">
                        <FileIcon type={file.type} size="small" />
                        <div>
                          <p className="text-sm font-medium text-material-grey-800">
                            {file.name}
                          </p>
                          {file.type === 'folder' && (
                            <p className="text-xs text-material-grey-500">
                              {file.items} 个项目
                            </p>
                          )}
                        </div>
                      </div>

                      <div className="col-span-2">
                        <span className="text-sm text-material-grey-600">
                          {file.type === 'folder' ? '-' : file.size}
                        </span>
                      </div>

                      <div className="col-span-2">
                        <span className="text-sm text-material-grey-600">{file.location}</span>
                      </div>

                      <div className="col-span-2">
                        <span className="text-sm text-material-grey-600">{file.starredDate}</span>
                      </div>

                      <div className="col-span-2 flex justify-end space-x-2">
                        <Button
                          variant="ghost"
                          size="sm"
                          onClick={(e) => handleRemoveStar(file.id, e)}
                        >
                          <Star className="w-4 h-4 fill-yellow-400 text-yellow-400" />
                        </Button>
                        <Button variant="ghost" size="sm">
                          <Download className="w-4 h-4" />
                        </Button>
                        <Button variant="ghost" size="sm">
                          <MoreVertical className="w-4 h-4" />
                        </Button>
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          )}
        </div>

        {/* 空状态 */}
        {filteredFiles.length === 0 && (
          <div className="text-center py-12">
            <div className="w-24 h-24 mx-auto mb-4 bg-material-grey-200 rounded-full flex items-center justify-center">
              <Star className="w-8 h-8 text-material-grey-500" />
            </div>
            <h3 className="text-lg font-medium text-material-grey-700 mb-2">
              {searchQuery ? '未找到匹配的星标文件' : '暂无星标文件'}
            </h3>
            <p className="text-material-grey-500">
              {searchQuery ? '尝试使用不同的关键词搜索' : '为重要文件添加星标，它们将显示在这里'}
            </p>
          </div>
        )}
      </div>
    </>
  );
};

export default Starred;
